<template>
  <div class="home">
    <!-- 头部 -->
    <div class="head">
      <!-- 搜索 -->
      <van-search
        input-align="center"
        shape="round"
        background="transparent"
        disabled
        :placeholder="$t('home.inputGoodsName')"
        @click="weixx"
      />
      <!-- 轮播图 -->
      <div class="home-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in swipeImg" :key="index">
            <van-image :src="item.image"></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- tips -->
    <van-row class="tips" type="flex" justify="space-around">
      <van-col class="tipText" span="7">
        <svg
          style=" display: inline-block;
                vertical-align: middle;"
          t="1580715905780"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4530"
          width="10"
          height="10"
        >
          <path
            d="M1020.829716 523.782144c-0.124928-0.282624-0.065536-0.6144-0.2048-0.878592l-96-192.18432a32.012288 32.012288 0 0 0-28.624896-17.702912h-192a32.03072 32.03072 0 0 0 0 64.06144H768.00002v160.1536a31.997952 31.997952 0 0 0 32 32.03072h160v160.1536h-49.5616c-0.374784-0.657408-0.86016-1.2288-1.251328-1.878016a129.378304 129.378304 0 0 0-6.873088-10.258432c-1.875968-2.533376-3.940352-4.878336-5.984256-7.258112a127.3856 127.3856 0 0 0-11.956224-12.136448c-2.936832-2.625536-5.91872-5.175296-9.09312-7.520256a132.17792 132.17792 0 0 0-8.1408-5.490688 128.6144 128.6144 0 0 0-12.781568-6.944768c-2.4576-1.171456-4.888576-2.37568-7.436288-3.3792a126.5664 126.5664 0 0 0-17.999872-5.599232 108.138496 108.138496 0 0 0-6.406144-1.312768 112.295936 112.295936 0 0 0-45.056 0c-2.142208 0.374784-4.235264 0.8192-6.3488 1.298432a124.928 124.928 0 0 0-18.23744 5.679104c-2.390016 0.950272-4.655104 2.07872-6.981632 3.172352a130.541568 130.541568 0 0 0-13.1584 7.14752 144.46592 144.46592 0 0 0-7.921664 5.349376c-3.311616 2.439168-6.436864 5.12-9.515008 7.866368a129.2288 129.2288 0 0 0-11.405312 11.603968c-2.14016 2.48832-4.3008 4.927488-6.250496 7.5776a123.65824 123.65824 0 0 0-6.828032 10.196992c-0.391168 0.641024-0.876544 1.2288-1.251328 1.878016h-49.5616V152.86272A31.997952 31.997952 0 0 0 608.00002 120.832H32.00002A31.997952 31.997952 0 0 0 0.00002 152.86272V761.4464a31.997952 31.997952 0 0 0 32 32.03072H128.00002a128 128 0 1 0 256 0h288a128 128 0 1 0 256 0h64A31.997952 31.997952 0 0 0 1024.00002 761.4464V537.23136a31.619072 31.619072 0 0 0-3.170304-13.449216zM384.00002 184.89344v196.4032l-46.249984-30.869504a31.961088 31.961088 0 0 0-35.500032 0L256.00002 381.298688V184.89344h128zM256.00002 857.53856a64.114688 64.114688 0 0 1-64-64.06144 63.39584 63.39584 0 0 1 3.766272-20.801536c0.06144-0.188416 0.2048-0.313344 0.26624-0.499712a64.14336 64.14336 0 0 1 39.282688-39.022592c0.970752-0.329728 1.95584-0.62464 2.93888-0.9216a57.294848 57.294848 0 0 1 35.5328 0.016384c0.966656 0.280576 1.918976 0.5632 2.8672 0.888832a64.3072 64.3072 0 0 1 39.31136 39.067648c0.063488 0.190464 0.221184 0.346112 0.282624 0.53248a63.03744 63.03744 0 0 1 3.749888 20.740096A64.114688 64.114688 0 0 1 256.00002 857.53856z m110.4384-128.12288c-0.374784-0.657408-0.86016-1.2288-1.251328-1.878016a129.378304 129.378304 0 0 0-6.873088-10.258432c-1.875968-2.533376-3.940352-4.878336-5.984256-7.258112a127.3856 127.3856 0 0 0-11.956224-12.136448c-2.936832-2.625536-5.91872-5.175296-9.09312-7.520256a132.17792 132.17792 0 0 0-8.1408-5.490688 128.6144 128.6144 0 0 0-12.781568-6.944768c-2.4576-1.171456-4.888576-2.37568-7.436288-3.3792a126.5664 126.5664 0 0 0-17.999872-5.599232 108.138496 108.138496 0 0 0-6.406144-1.312768A125.145088 125.145088 0 0 0 256.00002 665.35424a125.503488 125.503488 0 0 0-22.546432 2.29376c-2.142208 0.374784-4.235264 0.8192-6.3488 1.298432a124.928 124.928 0 0 0-18.23744 5.679104c-2.390016 0.950272-4.655104 2.07872-6.981632 3.172352a130.7648 130.7648 0 0 0-13.1584 7.14752 143.634432 143.634432 0 0 0-7.919616 5.349376c-3.311616 2.439168-6.438912 5.12-9.517056 7.866368a129.255424 129.255424 0 0 0-11.405312 11.603968c-2.14016 2.48832-4.3008 4.927488-6.250496 7.5776a123.65824 123.65824 0 0 0-6.828032 10.196992c-0.391168 0.641024-0.876544 1.2288-1.251328 1.878016H64.00002V184.89344h128V441.1392a31.995904 31.995904 0 0 0 49.750016 26.648576l78.249984-52.205568 78.249984 52.205568A31.995904 31.995904 0 0 0 448.00002 441.1392V184.89344h128v544.52224H366.43842z m433.5616 128.12288a64.114688 64.114688 0 0 1-64-64.06144 63.412224 63.412224 0 0 1 3.766272-20.801536c0.06144-0.188416 0.2048-0.313344 0.26624-0.499712a64.139264 64.139264 0 0 1 39.278592-39.022592c0.970752-0.329728 1.95584-0.62464 2.93888-0.9216a57.294848 57.294848 0 0 1 35.5328 0.016384c0.966656 0.280576 1.918976 0.5632 2.8672 0.888832a64.3072 64.3072 0 0 1 39.31136 39.067648c0.063488 0.190464 0.221184 0.346112 0.282624 0.53248a63.03744 63.03744 0 0 1 3.749888 20.740096 64.114688 64.114688 0 0 1-63.993856 64.06144z m76.218368-480.4608l64 128.12288H832.00002v-128.12288h44.218368z"
            fill="#45c763"
            p-id="4531"
          />
        </svg>
        {{$t('goodsDetail.quickTime')}}
      </van-col>
      <van-col class="tipText" span="6">
        <svg
          style=" display: inline-block;
                vertical-align: middle;"
          t="1580715987539"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5580"
          width="10"
          height="10"
        >
          <path
            d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z"
            fill="#45c763"
            p-id="5581"
          />
          <path
            d="M624.74752 263.6288a35.72224 35.72224 0 0 0-25.344 10.496L512 361.52832 424.59648 274.1248a35.73248 35.73248 0 0 0-25.344-10.496 35.84 35.84 0 0 0-25.344 61.17888L451.07712 401.9712H348.16a35.84 35.84 0 1 0 0 71.68h128v66.56H348.16a35.84 35.84 0 1 0 0 71.68h128v133.12a35.84 35.84 0 1 0 71.68 0v-133.12h128a35.84 35.84 0 1 0 0-71.68h-128v-66.56h128a35.84 35.84 0 1 0 0-71.68h-102.91712l77.16352-77.16352a35.84 35.84 0 0 0-25.33888-61.17888z"
            fill="#45c763"
            p-id="5582"
          />
        </svg>
        {{ $t('common.distributionTip') }}
      </van-col>
      <van-col class="tipText" span="6">
        <svg
          style=" display: inline-block;
                vertical-align: middle;"
          t="1580716067147"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6501"
          width="10"
          height="10"
        >
          <path
            d="M670.08 366.976c-6.24-6.24-16.384-6.24-22.624 0l-169.696 169.696c-2.88 2.88-6.88 4.672-11.328 4.672s-8.416-1.792-11.328-4.672l-79.2-79.2c-5.728-5.728-15.424-5.312-21.696 0.928-6.24 6.24-6.656 15.968-0.928 21.696l90.496 90.496 0 0c5.792 5.792 13.792 9.376 22.624 9.376s16.832-3.584 22.624-9.376l0 0 181.024-181.024C676.32 383.328 676.32 373.216 670.08 366.976z"
            p-id="6502"
            fill="#45c763"
          />
          <path
            d="M496 848c-168.896 0-267.072-286.688-271.168-298.912L224 544 224 310.112l272-136 272 136-0.8 238.912C763.168 561.248 666.24 848 496 848zM256 541.312c9.632 27.168 101.344 274.688 240 274.688 140.064 0 230.56-247.68 240-274.656l0-211.424-240-120L256 329.888 256 541.312z"
            p-id="6503"
            fill="#45c763"
          />
        </svg>
        {{ $t('common.easeBack') }}
      </van-col>
    </van-row>
    <!-- 广告图 -->
    <van-image src="http://518taole.7-orange.cn/homead2.gif" />
    <!-- 分类 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(item,index) in categoryData"
        :key="index"
        :icon="item.cat_image"
        :text="item.cat_name"
      />
    </van-grid>

    <!-- 会员卡 -->
    <div class="vipPage" @click="weixx">
      <svg
        t="1580717748882"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9481"
        width="32"
        height="32"
      >
        <path
          d="M505.8 201.7c-17 0-30.8-13.8-30.8-30.8s13.8-30.8 30.8-30.8 30.8 13.8 30.8 30.8c0.1 17-13.8 30.8-30.8 30.8z m0-46.5c-8.6 0-15.7 7-15.7 15.7 0 8.6 7 15.7 15.7 15.7s15.7-7 15.7-15.7c0-8.6-7-15.7-15.7-15.7z"
          fill="#47B7F8"
          p-id="9482"
        />
        <path
          d="M677 170h-13.5v-13.5c0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5V170H637c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h13.5v13.5c0 3.6 2.9 6.5 6.5 6.5s6.5-2.9 6.5-6.5V183H677c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5z"
          fill="#F7E42F"
          p-id="9483"
        />
        <path
          d="M938.7 436.8H923v-15.7c0-4.2-3.4-7.6-7.6-7.6s-7.6 3.4-7.6 7.6v15.7h-15.7c-4.2 0-7.6 3.4-7.6 7.6 0 4.2 3.4 7.6 7.6 7.6h15.7v15.7c0 4.2 3.4 7.6 7.6 7.6s7.6-3.4 7.6-7.6V452h15.7c4.2 0 7.6-3.4 7.6-7.6 0-4.3-3.4-7.6-7.6-7.6z"
          fill="#F8B62D"
          p-id="9484"
        />
        <path
          d="M227.8 208.9m-11.4 0a11.4 11.4 0 1 0 22.8 0 11.4 11.4 0 1 0-22.8 0Z"
          fill="#F8B62D"
          p-id="9485"
        />
        <path
          d="M781.3 230.9m-15.2 0a15.2 15.2 0 1 0 30.4 0 15.2 15.2 0 1 0-30.4 0Z"
          fill="#F8B62D"
          p-id="9486"
        />
        <path
          d="M115.2 413.5m-15.2 0a15.2 15.2 0 1 0 30.4 0 15.2 15.2 0 1 0-30.4 0Z"
          fill="#F7E42F"
          p-id="9487"
        />
        <path
          d="M132.6 651.4c-17 0-30.8-13.8-30.8-30.8s13.8-30.8 30.8-30.8 30.8 13.8 30.8 30.8-13.9 30.8-30.8 30.8z m0-46.4c-8.6 0-15.7 7-15.7 15.7 0 8.6 7 15.7 15.7 15.7s15.7-7 15.7-15.7c-0.1-8.7-7.1-15.7-15.7-15.7z"
          fill="#F8B62D"
          p-id="9488"
        />
        <path
          d="M318.6 68.3c-1.6-1.6-4.3-1.6-5.9 0-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2s2.2-0.4 3-1.2c1.6-1.6 1.6-4.3 0-5.9l-13.6-13.6zM354.1 103.9c-0.8-0.8-1.8-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-1.6 1.6-1.6 4.3 0 5.9l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2 0.8-0.8 1.2-1.8 1.2-3 0-1.1-0.4-2.2-1.2-3l-13.5-13.4zM351.2 89c1.1 0 2.2-0.4 3-1.2l13.5-13.5c0.8-0.8 1.2-1.8 1.2-3 0-1.1-0.4-2.2-1.2-3-1.6-1.6-4.3-1.6-5.9 0l-13.5 13.5c-1.6 1.6-1.6 4.3 0 5.9 0.7 0.8 1.7 1.3 2.9 1.3zM326.1 103.9l-13.5 13.5c-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2l13.5-13.5c1.6-1.6 1.6-4.3 0-5.9-1.6-1.7-4.4-1.7-6-0.1zM328.7 95.8c0-2.3-1.9-4.2-4.2-4.2h-19c-2.3 0-4.2 1.9-4.2 4.2s1.9 4.2 4.2 4.2h19c2.3 0 4.2-1.9 4.2-4.2zM374.8 91.6h-19c-2.3 0-4.2 1.9-4.2 4.2s1.9 4.2 4.2 4.2h19c2.3 0 4.2-1.9 4.2-4.2s-1.9-4.2-4.2-4.2zM340.1 57c-2.3 0-4.2 1.9-4.2 4.2v19c0 2.3 1.9 4.2 4.2 4.2 2.3 0 4.2-1.9 4.2-4.2v-19c0-2.4-1.9-4.2-4.2-4.2zM340.1 107.2c-2.3 0-4.2 1.9-4.2 4.2v19c0 2.3 1.9 4.2 4.2 4.2 2.3 0 4.2-1.9 4.2-4.2v-19c0-2.3-1.9-4.2-4.2-4.2z"
          fill="#FAEE00"
          p-id="9489"
        />
        <path
          d="M831.1 624c-1.6-1.6-4.3-1.6-5.9 0-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2s2.2-0.4 3-1.2c1.6-1.6 1.6-4.3 0-5.9L831.1 624zM866.7 659.5c-0.8-0.8-1.8-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-1.6 1.6-1.6 4.3 0 5.9l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2 0.8-0.8 1.2-1.8 1.2-3s-0.4-2.2-1.2-3l-13.5-13.4zM863.7 644.6c1.1 0 2.2-0.4 3-1.2l13.5-13.5c0.8-0.8 1.2-1.8 1.2-3s-0.4-2.2-1.2-3c-1.6-1.6-4.3-1.6-5.9 0l-13.5 13.5c-1.6 1.6-1.6 4.3 0 5.9 0.7 0.9 1.8 1.3 2.9 1.3zM838.7 659.5L825.2 673c-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2l13.5-13.5c1.6-1.6 1.6-4.3 0-5.9-1.7-1.7-4.4-1.7-6-0.1zM841.3 651.4c0-2.3-1.9-4.2-4.2-4.2h-19c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2h19c2.3 0 4.2-1.8 4.2-4.2zM887.3 647.2h-19c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2h19c2.3 0 4.2-1.9 4.2-4.2 0-2.3-1.9-4.2-4.2-4.2zM852.7 612.6c-2.3 0-4.2 1.9-4.2 4.2v19c0 2.3 1.9 4.2 4.2 4.2 2.3 0 4.2-1.9 4.2-4.2v-19c0-2.3-1.9-4.2-4.2-4.2zM852.7 662.8c-2.3 0-4.2 1.9-4.2 4.2v19c0 2.3 1.9 4.2 4.2 4.2 2.3 0 4.2-1.9 4.2-4.2v-19c0-2.3-1.9-4.2-4.2-4.2z"
          fill="#F8B62D"
          p-id="9490"
        />
        <path
          d="M873.1 919.4H846c-6.3 0-11.4-5.1-11.4-11.4 0-6.3 5.1-11.4 11.4-11.4h27.1c6.3 0 11.4 5.1 11.4 11.4 0 6.3-5.1 11.4-11.4 11.4zM149.9 919.4h-34.6c-6.3 0-11.4-5.1-11.4-11.4 0-6.3 5.1-11.4 11.4-11.4h34.6c6.3 0 11.4 5.1 11.4 11.4-0.1 6.3-5.1 11.4-11.4 11.4zM812.6 919.4H188.1c-6.3 0-11.4-5.1-11.4-11.4 0-6.3 5.1-11.4 11.4-11.4h624.5c6.3 0 11.4 5.1 11.4 11.4 0 6.3-5.1 11.4-11.4 11.4z"
          fill="#3E3A39"
          p-id="9491"
        />
        <path
          d="M481.7 879.3L178.1 508.9c-7.6-9.3-8.6-22.3-2.5-32.6l106.2-180c5.3-8.9 15-14.4 25.5-14.4H720c10.7 0 20.6 5.7 25.8 15l100.4 179.6c5.7 10.3 4.6 22.9-2.9 32l-304 370.8c-14.8 18.1-42.8 18.1-57.6 0z"
          fill="#FCEE21"
          p-id="9492"
        />
        <path
          d="M745.7 296.9c-5.2-9.2-15.1-15-25.8-15H503.4v610.2c12.9 2.4 26.8-1.8 35.8-12.8l303.9-370.8c7.5-9.1 8.6-21.8 2.9-32L745.7 296.9z"
          fill="#F8B62D"
          p-id="9493"
        />
        <path
          d="M501.1 904.2c-15 0-29.1-6.7-38.5-18.4L149.9 497.3c-10.7-13.3-12.2-32.2-3.6-47l46.2-79.8c3.1-5.4 10.1-7.3 15.5-4.1 5.4 3.1 7.3 10.1 4.1 15.5L166 461.7c-3.9 6.7-3.2 15.3 1.6 21.4l312.7 388.5c5.1 6.3 12.7 10 20.8 10 8.1 0 15.7-3.6 20.8-10l313-388.9c4.8-6 5.6-14.2 1.8-21L733.4 273.3c-3.3-6.1-9.7-9.8-16.6-9.8H291.7c-6.7 0-13 3.6-16.4 9.5l-8.5 14.7c-3.1 5.4-10.1 7.3-15.5 4.1-5.4-3.1-7.3-10.1-4.1-15.5l8.5-14.7c7.4-12.8 21.3-20.8 36.1-20.8h425.1c15.2 0 29.2 8.3 36.5 21.6l103.4 188.3c8.2 14.9 6.6 33-4.1 46.2l-313 388.9c-9.6 11.7-23.6 18.4-38.6 18.4z"
          fill="#3E3A39"
          p-id="9494"
        />
        <path
          d="M223.2 346.1c-1.9 0-3.9-0.5-5.7-1.5-5.4-3.1-7.3-10.1-4.1-15.5l11.4-19.6c3.1-5.4 10.1-7.3 15.5-4.1 5.4 3.1 7.3 10.1 4.1 15.5L233 340.4c-2.1 3.7-5.9 5.7-9.8 5.7z"
          fill="#3E3A39"
          p-id="9495"
        />
        <path d="M502.5 886.9L630.4 512" fill="#FCEE21" p-id="9496" />
        <path
          d="M502.5 898.3c-1.2 0-2.5-0.2-3.7-0.6-5.9-2-9.1-8.5-7.1-14.4l127.9-375c2-5.9 8.5-9.1 14.4-7.1s9.1 8.5 7.1 14.4l-127.9 375c-1.5 4.7-5.9 7.7-10.7 7.7z"
          fill="#3E3A39"
          p-id="9497"
        />
        <path d="M501.1 886.9L363.7 502.4" fill="#FCEE21" p-id="9498" />
        <path
          d="M501.1 898.3c-4.7 0-9-2.9-10.7-7.5L353 506.3c-2.1-5.9 1-12.4 6.9-14.5 5.9-2.1 12.4 1 14.5 6.9l137.4 384.5c2.1 5.9-1 12.4-6.9 14.5-1.3 0.4-2.5 0.6-3.8 0.6z"
          fill="#3E3A39"
          p-id="9499"
        />
        <path
          d="M345 441.6c-2.7 0-5.5-1-7.7-3-4.6-4.2-5-11.4-0.7-16.1l156-170.6c2.1-2.3 5.1-3.7 8.3-3.7h0.1c3.1 0 6.1 1.3 8.3 3.6L670 422.5c4.3 4.6 4.1 11.8-0.5 16.1-4.6 4.3-11.8 4.1-16.1-0.5L501.2 276.4 353.4 437.9c-2.2 2.5-5.3 3.7-8.4 3.7z"
          fill="#3E3A39"
          p-id="9500"
        />
        <path
          d="M786.6 467.7c0 19.2-15.7 34.8-34.8 34.8H285.6c-19.2 0-34.8-15.7-34.8-34.8 0-19.2 15.7-34.8 34.8-34.8h466.2c19.2 0 34.8 15.6 34.8 34.8z"
          fill="#FFFFFF"
          p-id="9501"
        />
        <path
          d="M751.8 513.9h-501c-25.5 0-46.2-20.7-46.2-46.2 0-25.5 20.7-46.2 46.2-46.2h501.1c25.5 0 46.2 20.7 46.2 46.2-0.1 25.5-20.8 46.2-46.3 46.2z m-501-69.7c-12.9 0-23.5 10.5-23.5 23.5 0 12.9 10.5 23.5 23.5 23.5h501.1c12.9 0 23.5-10.5 23.5-23.5 0-12.9-10.5-23.5-23.5-23.5H250.8z"
          fill="#3E3A39"
          p-id="9502"
        />
        <path
          d="M275.8 387.5c-1.8 0-3.7-0.4-5.4-1.4-5.5-3-7.6-9.9-4.6-15.4l28.3-52.2c5-9.3 14.7-15.1 25.3-15.1H345c6.3 0 11.4 5.1 11.4 11.4s-5.1 11.4-11.4 11.4h-25.6c-2.2 0-4.2 1.2-5.3 3.1l-28.3 52.2c-2 3.9-5.9 6-10 6z"
          fill="#FFFFFF"
          p-id="9503"
        />
      </svg>
      <span class="title">{{ $t('home.vipDesc') }}</span>
      <span class="subTitle">{{ $t('home.vipSubDesc') }}></span>
    </div>

    <!-- 商品列表 -->
    <div id="tabbarItem">
      <!-- 滑动选项卡 -->
      <van-tabs v-model="tactive" animated swipeable sticky>
        <van-tab
          v-for="(item,index) in tabbarData"
          :key="index"
          :title="item.tabbar_name"
          @change="onTabbar"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('home.bottomTip')"
            @load="onLoad"
          >
            <!-- 宫格 -->
            <van-grid :column-num="2">
              <van-grid-item
                v-for="(item,index) in tabbarGoodsData"
                :key="index"
                route
                :to="'/goodsDetail/'+item.id"
              >
                <van-image slot="icon" :src="item.small_image"></van-image>
                <div slot="text">
                  <p class="itemTitle">{{ item.product_name }}</p>
                  <p class="itemSubTitle">{{ item.spec }}</p>
                  <span class="price">{{ item.price | moneyFormat }}</span>
                  <span class="originPrice">{{ item.origin_price | moneyFormat }}</span>
                  <!-- @click.stop 阻止事件冒泡 -->
                  <div class="buyCar" @click.stop="onJoinCart(item.id)">
                    <svg
                      t="1582615262441"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="7234"
                      width="25"
                      height="25"
                    >
                      <path
                        d="M1024 512c0 282.77248-229.22752 512-511.99488 512C229.23264 1024 0 794.77248 0 512 0 229.23264 229.23264 0 512.00512 0 794.77248 0 1024 229.23264 1024 512zM859.61216 334.84288c9.22112-23.88992 9.4208-42.5728 0.56832-55.47008-4.80768-7.02464-14.59712-15.38048-34.06848-15.38048-32.0256 0.49152-448.55808 0-452.03968 0l-0.02048 0c-8.16128 0-14.7712 6.5792-14.79168 14.76608-0.0256 8.1664 6.58432 14.7712 14.76608 14.79168 14.1056 0.03072 420.23424 0.47104 452.28032 0 4.82304 0 8.35584 0.96256 9.46688 2.53952 1.67936 2.46272 2.7904 11.14624-3.3024 27.09504-14.6176 30.83776-83.21024 189.45536-91.9808 203.24352-1.3312 2.08384-2.51904 4.11648-3.67104 6.08256-5.69856 9.80992-7.61856 13.09184-26.79808 13.09184L383.02208 545.60256c-17.67936-66.7136-79.65696-286.49472-82.5856-297.2416-0.19968-0.6912-0.41984-1.3056-0.6912-1.95072-10.30656-24.03328-34.24256-25.39008-59.61216-25.39008L172.11904 221.02016c-8.16128 0-14.79168 6.6048-14.79168 14.76608s6.6304 14.79168 14.79168 14.79168l68.01408 0c12.96896 0 26.30656 8.95488 32.0512 21.4016 5.3504 19.59936 80.09728 269.75232 86.26176 296.86784 11.19232 49.18272 41.09312 81.28512 82.09408 81.28512l276.21376 0c8.18688 0 14.78656-6.63552 14.78656-14.79168 0-8.1664-6.59968-14.80192-14.78656-14.80192L440.53504 620.53888c-28.96896 0-42.87488-25.06752-49.57696-45.37856l319.05792 0c33.46944 0 43.16672-12.03712 52.34176-27.76064 0.96256-1.62304 1.9712-3.3536 3.07712-5.10464C774.85056 527.53408 843.9552 367.97952 859.61216 334.84288L859.61216 334.84288zM432.69632 664.80128c-38.08768 0-69.05344 31.01696-69.07904 69.07904 0 38.08256 30.99136 69.09952 69.07904 69.09952 38.08768 0 69.07904-31.01696 69.07904-69.09952C501.77536 695.78752 470.784 664.80128 432.69632 664.80128L432.69632 664.80128zM432.69632 774.59968c-22.41024 0-40.64768-18.25792-40.64768-40.69888 0-22.43072 18.24256-40.66816 40.64768-40.66816 22.43584 0 40.6784 18.24256 40.6784 40.66816C473.37472 756.34176 455.13216 774.59968 432.69632 774.59968L432.69632 774.59968zM713.73824 664.80128c-38.08768 0-69.04832 31.01696-69.0688 69.07904 0 38.08256 30.98112 69.09952 69.0688 69.09952s69.07392-31.01696 69.07392-69.09952C782.81728 695.78752 751.83104 664.80128 713.73824 664.80128L713.73824 664.80128zM713.73824 774.59968c-22.41024 0-40.64768-18.25792-40.64768-40.69888 0-22.43072 18.24256-40.66816 40.64768-40.66816 22.43072 0 40.6784 18.24256 40.6784 40.66816C754.42176 756.34176 736.16896 774.59968 713.73824 774.59968L713.73824 774.59968z"
                        p-id="7235"
                        fill="#3db864"
                      />
                    </svg>
                  </div>
                </div>
              </van-grid-item>
            </van-grid>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      tactive: 0,
      tabbarGoodsData: [],
      page: 1,
      per_page: 10,
      tabbarData: [],
      buy_limitData: [], // 限时抢购的商品
      categoryData: [], // 商品分类
      time: 2 * 60 * 60 * 1000, // 限时时间
      value: "",
      uid: 2,
      swipeImg: [], // 轮播图
    };
  },
  methods: {
    // 加入购物车
    onJoinCart(id) {
      this.$router.push("/");
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");
        this.$toast("请先登录！");
      } else {
        this.$http
          .post(`/addCart`, {
            user_id: localStorage.getItem("userId"),
            goods_id: id,
          })
          .then((res) => {
            this.$toast("成功加入购物车");
          });
      }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.tabbarGoodsData.length >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    // 选项卡分类商品
    onTabbar(id) {
      this.$http.get(`/home_tabbar_goods?tid=${id}`).then((res) => {
        this.tabbarGoodsData = res.data.data;
      });
    },
    weixx() {
      this.$toast("暂未实现");
    },
  },
  created() {
    // 轮播图
    this.$http.get("/swpie_image").then((res) => {
      this.swipeImg = res.data.data;
    });

    // 分类
    this.$http.get("/categories").then((res) => {
      this.categoryData = res.data.data;
    });

    // 限时抢购
    this.$http.get("/buy_limit").then((res) => {
      this.buy_limitData = res.data.data;
    });

    // 选项卡分类名称
    this.$http.get("/home_tabbar_categories").then((res) => {
      this.tabbarData = res.data.data;
    });

    // 第一个选项卡商品数据
    this.$http.get(`/home_tabbar_goods?tid=${1}`).then((res) => {
      this.tabbarGoodsData = res.data.data;
    });
  },
  // 监听
  watch: {
    tactive() {
      this.onTabbar(this.tactive + 1);
    },
  },
};
</script>

<style lang="less">
.home {
  .head {
    width: 100%;
    padding-top: 0.625rem;
    background-image: url("http://518taole.7-orange.cn/backImage.png");
  }

  .home-swipe {
    width: 100%;
    height: 11rem;
    display: block;
    padding: 0rem 0.625rem;
    box-sizing: border-box;

    .van-image {
      height: 10rem;
    }
  }

  .van-search .van-icon {
    display: none;
  }

  .tips {
    margin-top: 0.3125rem;
    .tipText {
      font-size: 0.6rem;
      color: #45c763;
    }
  }

  .van-image {
    margin-top: 0.625rem;
    overflow: hidden;

    img {
      width: 110%;
    }
  }

  .vipPage {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0.5rem auto;
    height: 2rem;
    background-color: #3bba63;
    width: 95%;
    border-radius: 0.2rem;
    opacity: 0.9;

    .title {
      margin-left: 0.5rem;
      font-size: 0.625rem;
      color: #fff;
    }

    .subTitle {
      margin-left: auto;
      margin-right: 0.5rem;
      font-size: 0.625rem;
      color: #fff;
    }
  }

  .wrapper {
    // margin-top: 0.625rem;
    padding: 1.25rem 0 0.9375rem 0;
    background-color: #fff;

    .wrapperTitle {
      margin: 0 0.625rem 0 0.625rem;
      height: 1.5625rem;

      .title {
        display: inline-block;
        border-left: 4px solid #3cb963;
        padding-left: 0.3125rem;
        height: 1.3125rem;
        line-height: 1.3125rem;
        vertical-align: middle;
        font-size: 1.1875rem;
        float: left;
      }

      .item {
        display: inline-block;
        width: 1.375rem;
        margin-right: 5px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #000;
      }

      .more {
        color: #3cb963;
        float: right;
        font-size: 0.8rem;
      }
    }

    .wrapperGoods {
      .van-grid-item__content {
        padding: 10px 8px;
      }

      .title {
        padding: 0.2rem;
        display: inline-block;
        font-size: 0.6258rem;
        height: 1.8rem;
        line-height: 1rem;
        font-size: 0.725rem;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .buyCar {
        position: absolute;
        right: 0.1rem;
        bottom: 1rem;
        width: 1.5rem;
        height: 1.5rem;
      }

      .price {
        position: relative;
        padding-left: 0.5rem;

        .nowPrice {
          color: #f37078;
          font-size: 0.928rem;
        }

        .originPrice {
          font-size: 0.6875rem;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
  }

  .van-tabs__line {
    background-color: #28be57;
  }

  .van-tab--active {
    color: #28be57;
  }

  #tabbarItem {
    .itemTitle,
    .itemSubTitle {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      line-height: 1rem;
      overflow: hidden;
    }

    .itemTitle {
      font-size: 0.646rem;
    }

    .itemSubTitle {
      color: grey;
      padding-top: 0.2rem;
      font-size: 0.5rem;
    }

    .price {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      color: #f37078;
      font-size: 0.928rem;
    }

    .originPrice {
      font-size: 0.6875rem;
      color: #999;
    }

    .van-image__img {
      width: 10.25rem;
      height: 10.25rem;
    }

    .buyCar {
      position: absolute;
      height: 1.5rem;
      width: 1.5rem;
      right: 1rem;
      bottom: 1.1rem;
    }
  }
}
</style>
